<template>
  <div id="animation-bar" class="animation-bar"></div>
</template>

<script>
import dataApi from "@/api/data";
export default {
  props: {
    city: String,
    parent_items:Array,
  },
  data() {
    return {
      imageDataUrl: "",
      items: [],
      chart: null,
      child_city: "北京",
      animationTimer: null
    };
  },
  watch: {
    city(val) {
      this.child_city = val;
      let option = this.setChart();
      this.chart.setOption(option);
    },
    parent_items(val){
      
      this.items = val
      dataApi.getImage().then((res) => {
          this.imageDataUrl = res.data.image;
          this.initChart();
        });
    }
  },
  mounted() {
    //this.prepareData();
  },
  beforeDestroy(){
    clearInterval(this.animationTimer)
  },
  methods: {
    animation() {
      let that = this
      let i = 0;
      this.animationTimer = setInterval(function () {
        var dynamicData = [
          that.getData("人工林蓄积"),
          that.getData("天然林蓄积"),
          that.getData("林地面积"),
        ];
        let item;
        switch (i) {
          case 0:
            item = "人工林面积";
            break;
          case 1:
            item = "天然林面积";
            break;
          case 2:
            item = "林地面积";
        }
        let maxData = that.getMax(that.getData(item));
        that.chart.setOption({
          title: {
            textStyle: {
              color: "rgb(238, 197, 102)",
            },
            text: that.child_city + item + "统计",
            right: "center",
            top: "0",
          },
          xAxis: {
            max: maxData,
          },
          series: [
            {
              data: that.getData(i),
              symbolBoundingData: maxData,
            },
            {
              data: that.getData(i),
              symbolBoundingData: maxData,
            },
          ],
        });
        if (i == 2) i = 0;
        else i++;
      }, 1500);
    },
    prepareData() {
      this.items = dataApi.getData().then((response) => {
        this.items = response.data.items;
        dataApi.getImage().then((res) => {
          this.imageDataUrl = res.data.image;
          this.initChart();
        });
      });
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("animation-bar"));
      let option = this.setChart();
      this.chart.setOption(option);
      this.animation()
      window.addEventListener("resize",()=>{
          this.resizeChart()
      })
    },
    setChart() {
      var wood = this.imageDataUrl;
      let items = this.items;
      var maxData = 150;
      let myChart = this.chart;
      let option = {
        backgroundColor: "#282a36",
        tooltip: {},
        title: {
          text: "Loading...",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          right: "center",
          top: "0",
        },
        xAxis: {
          max: maxData,
          splitLine: { show: false },
          offset: 10,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            margin: 10,
          },
        },
        yAxis: {
          data: ["2013", "2014", "2015", "2016", "2017", "2018"],
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: "#fff",
            fontSize: 16,
          },
        },
        grid: {
          top: "center",
          height: 200,
          left: 70,
          right: 100,
        },
        series: [
          {
            // current data
            type: "pictorialBar",
            symbol: wood,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 30,
            symbolBoundingData: maxData,
            data: [0, 0, 0, 0, 0, 0],
            markLine: {
              symbol: "none",
              label: {
                formatter: "max: {c}",
                position: "start",
              },
              lineStyle: {
                color: "rgb(238, 197, 102)",
                type: "dotted",
                opacity: 0.2,
                width: 2,
              },
              data: [
                {
                  type: "max",
                },
              ],
            },
            z: 10,
          },
          {
            // full data
            type: "pictorialBar",
            itemStyle: {
              normal: {
                opacity: 0.2,
              },
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol: wood,
            symbolSize: 30,
            symbolBoundingData: maxData,
            data: [0, 0, 0, 0, 0, 0],
            z: 5,
          },
        ],
      };
      
      return option;
    },
    getData(item) {
      let res = [];
      switch (item) {
        case 0:
          item = "人工林面积";
          break;
        case 1:
          item = "天然林面积";
          break;
        case 2:
          item = "林地面积";
      }
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i]["city"] == this.child_city)
          res.push(Number(this.items[i][item]));
      }
      return res;
    },
    getMax(item) {
      let max = 0;
      for (let i = 0; i < item.length; i++) {
        if (max < item[i]) max = item[i];
      }
      return max;
    },
    resizeChart(){
        this.chart.resize()
    }
  },
};
</script>

<style>
.animation-bar {
  width: 100%;
  height: calc(30vh);
}
</style>